<template>
  <div>
    <!-- 巡更打卡详情页 -->
    <div>
      <!-- 点位打卡部分 -->
      <div>
        <div class="listItem">
          <span class="title">名称</span>
          <div class="itemBody">
            <span class="name">{{ currentName }}</span>
          </div>
        </div>
        <!-- 每个部分 -->
        <div
          v-for="(item, index) in dataList"
          :key="index"
          class="listItem"
          @click="clickItem(item)"
        >
          <span class="title"
            >{{ typeof item === 'string' ? item : item.name }}：</span
          >
          <div class="itemBody">
            <!-- 点位名称 -->
            <span class="name">{{ item.name }}</span>
            <span class="time">{{
              typeof item === 'string' ? '未打卡' : item.time
            }}</span>
          </div>
          <div class="lightBox">
            <div
              :style="
                'background-color:' + (typeof item !== 'string' ? 'green' : '')
              "
              class="light"
            ></div>
          </div>
        </div>
      </div>
      <!-- 执行规则设置 -->
      <div style="margin-top: 20px">
        <h5>执行规则设置</h5>
        <div v-for="(item, index) in rule" :key="index" class="listItem">
          <span class="longTitle">{{ item.title }}</span>
          <div class="itemBody">
            <span class="name">{{ item.name }}</span>
            <span class="time">{{ item.time }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { task, putTask } from '@/api/index'
export default {
  data () {
    return {
      dataList: [],
      rule: [
        { title: '频率设置：', name: '稍等。。。' },
        { title: '时间设置：', name: '8：00-17：00' },
        { title: '负责人：', name: '李白' }
      ],
      copyList: [
        { title: '频率设置：', name: '每天' },
        '时间设置：',
        { title: '频率设置：', name: '每天' },
        '李白'
      ],
      initdata: {},
      currentName: '',
      currentId: ''
    }
  },
  mounted () {
    // 将方法暴露方便flutter调用
    window.getNode = this.getNode
    //
    this.currentId = this.$route.query.id
    this.currentName = this.$route.query.name
    this.getList(this.currentId)
    this.getNode()
  },

  methods: {
    // 接收flutter发送的消息，并返回是否调用接口的信息
    getNode (params) {
      var arr = []
      // 循环节点并记录当前需要打卡的节点
      this.copyList.map((item, index) => {
        if (typeof item === 'string') {
          arr.push(item)
        } else {
          // continue
        }
      })
      // 判断是否为当前需要打卡的节点
      if (params === arr[0]) {
        return true
      } else {
        return false
      }
    },
    // 查询点位以及规则信息
    // 获取待抢单任务列表
    async getList (id) {
      const params = {
        // 查询当前巡更任务（巡更任务id，任务类型：巡更）
        id: id,
        // processCategory: 'patrol',
        withProcessDetail: 1,
        withVariables: 1,
        tenantId: window.localStorage.getItem('tenantId')
      }
      try {
        const res = await task(params)
        // this.dataList = res.list
        console.log(res)
        console.log(res.variables.pointList.value)
        // 返回数据的pointList即为打卡点位信息
        this.dataList = res.variables.pointList
        this.initdata = res
        Toast('查询成功')
      } catch (error) {}
    },
    // 点击某列表修改打卡状态---自己测试
    clickItem (item) {
      console.log(item)
      console.log(this.dataList)
      // console.log(times)
    },
    // 调接口修改打卡任务状态
    async editCardStatus (val) {
      try {
        // 获取当前时间
        var date = new Date()
        console.log(date)
        const data = {
          variables: val,
          complete: 1,
          taskId: this.currentid
        }
        const res = await putTask(data)
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    // 获取所需格式的当前时间
    getNowTime () {
      var Dates = new Date()
      var Y = Dates.getFullYear()
      var M = Dates.getMonth() + 1
      var D = Dates.getDate()
      var H = Dates.getHours()
      var Min = Dates.getMinutes()
      var times =
        Y +
        (M < 10 ? '-0' : '-') +
        M +
        (D < 10 ? '-0' : '-') +
        D +
        '\xa0' +
        (H < 10 ? '0' : '') +
        H +
        (Min < 10 ? ':0' : ':') +
        Min
      return times
    }
  }
}
</script>

<style>
.listItem {
  /* background-color: pink; */
  /* height: 40px; */
  line-height: 30px;
  padding: 15px 30px;
  border-bottom: 1px solid grey;
  display: flex;
}
.title {
  display: inline-block;
  width: 60px;
  /* background-color: pink; */
}
.longTitle {
  display: inline-block;
  width: 100px;
}
.itemBody {
  display: flex;
  flex-grow: 2;
  padding-right: 20px;
  /* background-color: green; */
  justify-content: space-between;
}
.name {
  /* background-color: pink; */
}
.time {
  /* width: 150px; */
  /* background-color: pink; */
}
.lightBox {
  /* display: inline-block; */
  width: 30px;
  /* background-color: yellow; */
}
.light {
  width: 30px;
  height: 30px;
  border: 1px solid grey;
  /* background-color: green; */
  border-radius: 50%;
}
</style>
